<script lang="ts">
import { defineComponent, ref } from "vue";
import { get_pic_uuid_api, verification_api } from "@/api/img_verification";
import { AppData } from "@/utils/app";
import { delayTask } from "@/utils/timer";

import PopupCenter from "@/components/popup/center.vue";

const imgOptions = { width: 679, height: 382, scale: 0.34 };
const fillOptions = { width: 90, height: 60 };

export default defineComponent({
  components: { PopupCenter },
  setup() {
    const tempData = { uuid: "", smsId: "" };
    let checkCallback: ((id: string) => void) | null = null;

    const imgWidth = imgOptions.width * imgOptions.scale;
    const imgHeight = imgOptions.height * imgOptions.scale;
    const fillWidth = fillOptions.width * imgOptions.scale;
    const fillHeight = fillOptions.height * imgOptions.scale;

    const visible = ref(false);
    const finish = ref(false);
    const imgUrl = ref("");
    const fillUrl = ref("");
    const sliderValue = ref(0);

    const refreshImg = () => {
      sliderValue.value = 0;
      get_pic_uuid_api().then((resp) => {
        tempData.uuid = resp.uuid;
        imgUrl.value = `${AppData.domain}/entry/v1/img_verification/get_parent_pic?uuid=${resp.uuid}`;
        fillUrl.value = `${AppData.domain}/entry/v1/img_verification/get_child_pic?uuid=${resp.uuid}`;
      });
    };

    const sliderChange = (e: MiniApp.Event<{ x: number; source: "touch" }>) => {
      if (e.detail.source === "touch") sliderValue.value = e.detail.x;
    };
    const sliderTouchEnd = () => {
      verification_api(
        {
          uuid: tempData.uuid,
          value: sliderValue.value / imgOptions.scale,
        },
        false
      )
        .then((resp) => {
          finish.value = true;
          tempData.smsId = resp.sms_id;
          delayTask(1000, () => {
            visible.value = false;
            checkCallback?.(resp.sms_id);
          });
        })
        .catch(() => refreshImg());
    };

    const check = (callback: (id: string) => void) => {
      if (finish.value) return callback?.(tempData.smsId);
      visible.value = true;
      refreshImg();
      checkCallback = callback;
    };
    return {
      visible,
      finish,
      imgUrl,
      fillUrl,
      sliderValue,
      sliderChange,
      sliderTouchEnd,
      check,
      imgWidth,
      imgHeight,
      fillWidth,
      fillHeight,
    };
  },
});
</script>

<template>
  <PopupCenter v-model="visible" title="拖动下方滑块完成拼图">
    <view class="slider" @touchmove.stop.prevent>
      <view
        class="check-slider-content"
        :style="{ width: `${imgWidth}px`, height: `${imgHeight}px` }"
      >
        <template v-if="imgUrl">
          <image class="check-slider-img" :src="imgUrl" />
          <image
            class="check-slider-fill"
            :src="fillUrl"
            :style="{ width: `${fillWidth}px`, left: `${sliderValue}px` }"
          />
        </template>
      </view>
      <view class="check-slider-bar" :style="{ height: `${fillHeight}px` }">
        <view class="check-slider-track"></view>
        <movable-area class="check-slider-area">
          <movable-view
            class="check-slider-btn"
            :x="sliderValue"
            :damping="100"
            direction="horizontal"
            :style="{ width: `${fillWidth}px`, height: `${fillHeight}px` }"
            @change="sliderChange"
            @touchend="sliderTouchEnd"
          >
          </movable-view>
        </movable-area>
      </view>
    </view>
  </PopupCenter>
</template>

<style lang="scss">
.slider {
  padding: 0 24rpx 30rpx;

  .check-slider-content {
    position: relative;
    margin-bottom: 30rpx;
  }

  .check-slider-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .check-slider-fill {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .check-slider-bar {
    position: relative;
    width: 100%;
  }

  .check-slider-track {
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    height: 88%;
    border-radius: 80rpx;
    background-color: #f2f2f2;
    transform: translateY(-50%);
  }

  .check-slider-area {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .check-slider-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100rpx;
    background-color: #ff7900;
  }
}
</style>